<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./mobile.css">
<link rel="stylesheet" type="text/css" href="./sf_editor_toolbar.css">
<style type="text/css">
#sf {
    width:auto;
    heigth:auto;
    padding:5px 10px;
    outline:0;
    box-shadow:0 0 6px #ccc;
    border:1px solid #ccc;
    margin:0 ;
    overflow:auto;
}
</style>
</head>
<body>
    <div id="wrapper" class="en">
        <div class="btn-toolbar" data-role="editor-toolbar" data-target="#sf" style="display: none;">
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font">font<span class="caret"></span></a>
                <ul class="dropdown-menu" id="font-list"></ul>
            </div>
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font Size">fsize<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                    <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                    <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                </ul>
            </div>
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font Color">color<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a data-edit="forecolor #333" title="" data-original-title="defaut color"><span class="color-block" style="background:#333;"></span></a></li>
                    <li><a data-edit="forecolor #FF0000"><span class="color-block" style="background:#FF0000;"></span></a></li>
                    <li><a data-edit="forecolor #FF704F"><span class="color-block" style="background:#FF704F;"></span></a></li>
                    <li><a data-edit="forecolor #007000"><span class="color-block" style="background:#007000;"></span></a></li>
                    <li><a data-edit="forecolor #4D90FE"><span class="color-block" style="background:#4D90FE;"></span></a></li>
                    <li><a data-edit="forecolor #999999"><span class="color-block" style="background:#999999;"></span></a></li>
                    <li><a data-edit="forecolor #811201"><span class="color-block" style="background:#811201;"></span></a></li>
                    <li><a data-edit="forecolor #1E4152"><span class="color-block" style="background:#1E4152;"></span></a></li>
                </ul>
            </div>

            <div class="btn-group">
                <a id="sf-bold-button" class="btn" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)">B</a>
                <a id="sf-italic-button" class="btn" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)">I</a>
                <a id="sf-strike-button" class="btn" data-edit="strikethrough" title="" data-original-title="Strikethrough">s</a>
                <a id="sf-underline-button" class="btn" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)">U</a>
            </div>
            <div class="btn-group">
                <a id="sf-ulist-button" class="btn" data-edit="insertunorderedlist" title="" data-original-title="Bullet list">L1</a>
                <a id="sf-olist-button" class="btn" data-edit="insertorderedlist" title="" data-original-title="Number list">L2</a>
                <a id="sf-outdent-button" class="btn" data-edit="outdent" title="" data-original-title="Reduce indent (Shift+Tab)">Out</a>
                <a id="sf-indent-button" class="btn" data-edit="indent" title="" data-original-title="Indent (Tab)">In</a>
            </div>
            <div class="btn-group">
                <div class="btn-group">
                    <a id="sf-left-button" class="btn" data-edit="justifyleft" title="" data-original-title="Align Left (Ctrl/Cmd+L)">L</a>
                    <a id="sf-center-button" class="btn" data-edit="justifycenter" title="" data-original-title="Center (Ctrl/Cmd+E)">C</a>
                    <a id="sf-right-button" class="btn" data-edit="justifyright" title="" data-original-title="Align Right (Ctrl/Cmd+R)">R</a>
                    <a id="sf-justify-button" class="btn" data-edit="justifyfull" title="" data-original-title="Justify (Ctrl/Cmd+J)">J</a>
                </div>
                <div class="btn-group">
                    <a id="sf-link-button" class="btn dropdown-toggle"
                     data-toggle="dropdown" title=""
                     data-original-title="Hyperlink">Link</a>
                    <div class="dropdown-menu input-append">
                    </div>
                    <a id="sf-unlink-button" class="btn" data-edit="unlink" title="" data-original-title="Remove Hyperlink">Unlink</a>
                </div>
                <div class="btn-group">
                    <a id="sf-undo-button" class="btn" data-edit="undo" title="" data-original-title="Undo (Ctrl/Cmd+Z)">Undo</a>
                    <a id="sf-redo-button" class="btn" data-edit="redo" title="" data-original-title="Redo (Ctrl/Cmd+Y)">Redo</a>
                </div>
            </div>
        </div>
        <div id="sf" class="article" autofocus ></div>
<div id="link-popupx" style="display: none;">
 <input placeholder="URL" type="text" data-edit="createLink">
 <button class="btn" type="button">Add</button>
</div>
    </div><!-- wrapper -->
<script type="text/javascript" src="./jq.min.js"></script>
<script type="text/javascript" src="./ios.js"></script>
<script type="text/javascript" src="./jquery.hotkeys.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-wysiwyg.js"></script>
<script type="text/javascript">
$('#sf-link-button').click(function() {
  var con = '<input placeholder="URL" type="text" data-edit="createLink"> <button class="btn" type="button">Add</button>';
  $.modal(con);
});

$(function() {
    function initToolbarBootstrapBindings() {
      var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
            'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
            'Times New Roman', 'Verdana'],
            fontTarget = $('#font-list');
      $.each(fonts, function (idx, fontName) {
          fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
      });
      $('a[title]').tooltip({container:'body'});
        $('.dropdown-menu input').click(function() {return false;})
            .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
        .keydown('esc', function () {this.value='';$(this).change();});

      $('[data-role=magic-overlay]').each(function () {
        var overlay = $(this), target = $(overlay.data('target'));
        overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
      });
    };
    initToolbarBootstrapBindings();
    $('#sf').wysiwyg().css({'height':$(window).height() - 2});
});
</script>
<script type="text/javascript">
  function isIpad() {
    return (navigator.platform.indexOf('iPad') != -1);
  };
  function resizeTO(width, height) {
    if (isIpad())
      window.resizeTo(width, height)
    $('#sf').css({'width':width - 2});
    $('#sf').css({'height':height - 2});
    //document.getElementById("sf").innerHTML = document.getElementById("sf").innerHTML+"<p>" +width + ", "+ height +"</p>"
  }
  function wresize(){
    resizeTO($(window).width(), $(window).height())
  }
  if (!isIpad())
    $(window).resize(wresize)

  function setContent(content) {
    document.getElementById("sf").innerHTML = content
    return 1
  }

  function getContent() {
    return document.getElementById("sf").innerHTML
  }
  function btClicked(tag) {
    var bid = "sf-"+tag+"-button"
    var fireOnThis = document.getElementById(bid);
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( 'click', true, false );
    fireOnThis.dispatchEvent(evObj);
  }

  function test() {
    calliOSFunction ("func", ["bold", "italic"], null, null)
  }
</script>
</body></html>
